<template>
  <div>
    <!-- Main区域输入框和搜索重置按钮 -->
    <i-search ref="iSearch" :model="formData" @search="fetch" @reset="reset">
      <el-form-item label="下单人名" prop="customerName">
        <el-input v-model="formData.customerName"></el-input>
      </el-form-item>
      <el-form-item label="订单编码" prop="orderId">
        <el-input v-model="formData.orderId"></el-input>
      </el-form-item>
      <el-form-item label="付款时间" prop="time">
        <el-date-picker
          v-model="formDataTime.time"
          type="daterange"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
        ></el-date-picker>
      </el-form-item>
      <el-form-item label="手机号" prop="customerPhone">
        <el-input v-model="formData.customerPhone"></el-input>
      </el-form-item>
      <el-form-item label="订单状态" prop="orderStatus">
        <el-select v-model="formData.orderStatus">
          <el-option label="已下单" value="1"></el-option>
          <el-option label="已到货" value="2"></el-option>
          <el-option label="已取货" value="3"></el-option>
          <el-option label="已完成未评价" value="4"></el-option>
          <el-option label="已完成已评价" value="5"></el-option>
          <el-option label="已取消" value="6"></el-option>
        </el-select>
      </el-form-item>
    </i-search>

    <!-- 表格区域 -->
    <i-table
      :toolbar="toolbar"
      :tableData="tableData"
      :pageInfo="pageInfo"
      :selectionShow="true"
      @handleCurrentChange="handleCurrentChange"
      @handleSizeChange="handleSizeChange"
      @selection-change="handleSelectionChange"
    >
      <el-table-column
        v-for="(item,index) in columnList"
        :key="index"
        :label="item.label"
        :prop="item.prop"
        align="center"
      ></el-table-column>
    </i-table>

    <!-- 订单详情对话框 -->
    <el-dialog title="订单详情" :visible.sync="orderDetaildialogVisible" width="70%" :before-close="handleClose">
      <!-- 订单详情表格区域 -->
       <el-table
    :data="detailTableDate"
    border
    style="width: 100%">
    <el-table-column
          v-for="(item,index) in detailcolumnList"
          :key="index"
          :label="item.label"
          :prop="item.prop"
          align="center"
        ></el-table-column>
  </el-table>
      <!-- <i-table
        :tableData="detailTableDate"
        :pageInfo="detailpageInfo"
        :selectionShow="true"
        
      >
        <el-table-column
          v-for="(item,index) in detailcolumnList"
          :key="index"
          :label="item.label"
          :prop="item.prop"
          align="center"
        ></el-table-column>
      </i-table> -->
      <span slot="footer">
        <el-button @click="orderDetaildialogVisibled">关闭</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
// 注意首两个字母要大写，这样才会被识别出来所调用的子组件
import ISearch from "../../components/common/i-search.vue";
import ITable from "../../components/common/i-table.vue";
import IDialog from "../../components/common/i-dialog.vue";

import req from "@/api/order-manage.js";
export default {
  name: "order-manage",
  data() {
    return {
      // 搜索框数据
      formData: {},
      // 起始终止时间
      formDataTime: { time: "" },
      // 表格内容数据
      tableData: [],

      detailTableDate: [],
      // 设置详情对话框默认隐藏
      orderDetaildialogVisible: false,
      // 存储订单信息的id
      multipId: [],
      // 存储选中门店信息的版本号
      multipVersion: [],
      // 分页数据
      pageInfo: {
        pageIndex: 1,
        pageSize: 5,
        total: 0
      },
      detailpageInfo: {
        pageIndex: 1,
        pageSize: 5,
        total: 0
      },
      // 多个按钮数据设置
      toolbar: [
        {
          btnName: "详情",
          type: "primary",
          // 设置按钮的触发事件
          func: () => {
            if (this.multipId.length === 1) {
                          this.orderDetaildialogVisible = true;
              req("getlistOrderDetail", {
                orderId: this.multipId[0],
                pageSize: this.detailpageInfo.pageSize,
        pageNum: this.detailpageInfo.pageIndex
              }).then(data => {
                // console.log(data);
                // console.log(data.data);
                this.detailTableDate = data.data.list;
              });
            }
          }
        },
        {
          btnName: "订单取消",
          type: "primary",
          func: async () => {
            if(this.multipVersion.length!==0){
const confirmResult = await this.$confirm(
              "此操作将设置所选订单为订单取消状态,是否继续?",
              "提示",
              {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning"
              }
            ).catch(err => err);
            if (confirmResult !== "confirm") {
              this.$message("已取消操作");
              this.fetch();
            } else {
              req("updateOrderStatus", {
                orderId: this.multipId.join(","),
                orderStatus:parseInt(6),
                versionString:this.multipVersion.join(","),
              }).then(data => {
                // console.log(data)
                if (data.code !== 0) {
                  this.$message.error(data.msg);
                  this.fetch();
                }
                this.$message.success(data.msg);
                this.fetch();
              });
            }
            }
            
          }
        },
        {
          btnName: "订单到货",
          type: "primary",
          func: async () => {
            if(this.multipVersion.length!==0){
const confirmResult = await this.$confirm(
              "此操作将设置所选订单为到货状态,是否继续?",
              "提示",
              {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning"
              }
            ).catch(err => err);
            if (confirmResult !== "confirm") {
               this.$message("已取消操作");
              this.fetch();
            } else {
              req("updateOrderStatus", {
                orderId: this.multipId.join(","),
                orderStatus:parseInt(2),
                versionString:this.multipVersion.join(","),
              }).then(data => {
                // console.log(data)
                if (data.code !== 0) {
                  this.$message.error(data.msg);
                  this.fetch();
                }
                this.$message.success(data.msg);
                this.fetch();
              });
            }
            }
            
          }
          
        },
        {
          btnName: "取消到货",
          type: "primary",
          func: async () => {
            if(this.multipVersion.length!==0){
const confirmResult = await this.$confirm(
              "此操作将设置所选订单状态为取消到货,是否继续?",
              "提示",
              {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning"
              }
            ).catch(err => err);
            if (confirmResult !== "confirm") {
              this.$message("已取消操作");
              this.fetch();
            } else {
              req("updateOrderStatus", {
                orderId: this.multipId.join(","),
                orderStatus:parseInt(1),
                versionString:this.multipVersion.join(","),
              }).then(data => {
                // console.log(data)
                if (data.code !== 0) {
                  this.$message.error(data.msg);
                  this.fetch();
                }
                this.$message.success(data.msg);
                this.fetch();
              });
            }
            }
            
          }
        },
        {
          btnName: "订单已取货",
          type: "primary",
          func: async () => {
            if(this.multipVersion.length!==0){
const confirmResult = await this.$confirm(
              "此操作将设置所选订单状态为订单已取货,是否继续?",
              "提示",
              {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning"
              }
            ).catch(err => err);
            if (confirmResult !== "confirm") {
              this.$message("已取消操作");
              this.fetch();
            } else {
              req("updateOrderStatus", {
                orderId: this.multipId.join(","),
                orderStatus:parseInt(3),
                versionString:this.multipVersion.join(","),
              }).then(data => {
                // console.log(data)
                if (data.code !== 0) {
                  this.$message.error(data.msg);
                  this.fetch();
                }
                this.$message.success(data.msg);
                this.fetch();
              });
            }
            }
            
          }
        },
        {
          btnName: "取消已取货",
          type: "primary",
          func: async () => {
            if(this.multipVersion.length!==0){
const confirmResult = await this.$confirm(
              "此操作将设置所选订单状态为取消已取货,是否继续?",
              "提示",
              {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning"
              }
            ).catch(err => err);
            if (confirmResult !== "confirm") {
              this.$message("已取消操作");
              this.fetch();
            } else {
              req("updateOrderStatus", {
                orderId: this.multipId.join(","),
                orderStatus:parseInt(2),
                versionString:this.multipVersion.join(","),
              }).then(data => {
                // console.log(data)
                if (data.code !== 0) {
                  this.$message.error(data.msg);
                  this.fetch();
                }
                this.$message.success(data.msg);
                this.fetch();
              });
            }
            }
            
          }
        },
        // {
        //   btnName: "导出",
        //   type: "primary",
        //   func: () => {
        //     // console.log(this.pageInfo);
        //   }
        // }
      ],
      // 表格表头数据
      columnList: [
        { label: "订单编码", prop: "orderId" },
        { label: "订单总价", prop: "orderTotalPrice" },
        { label: "订单状态", prop: "orderStatus" },
        // { label: "支付状态", prop: "test4" },
        { label: "门店编码", prop: "storeId" },
        { label: "下单人姓名", prop: "customerName" },
        { label: "下单人手机号", prop: "customerPhone" },
        { label: "确认付款时间", prop: "payTime" }
      ],

      // 商品详情表格表头数据
      detailcolumnList: [
        { label: "商品编号", prop: "goodId" },
        { label: "商品名称", prop: "goodName" },
        { label: "商品数量", prop: "goodNumber" },
        { label: "总金额", prop: "goodTotalPrice" },
        { label: "售价", prop: "salePrice" },
        { label: "定价", prop: "goodPrice" },
        { label: "订单明细编号", prop: "orderDetailId" }
      ],
      formRules: {
        goodsName: [
          { required: true, message: "请输入商品名称", trigger: "change" }
        ],
        bookNumber: [
          { required: true, message: "请输入书号", trigger: "change" },
          { min: 3, max: 5, message: "长度在 3 到 5 个字符", trigger: "change" }
        ],
        firstClass: [
          { required: true, message: "请选择分类项目", trigger: "change" }
        ],
        secondClass: [
          { required: true, message: "请选择分类项目", trigger: "change" }
        ],
        moblie: [
          { required: true, message: "请输入活动名称", trigger: "change" },
          { min: 3, max: 5, message: "长度在 3 到 5 个字符", trigger: "change" }
        ],
        adeWords: [
          { required: true, message: "请输入广告词", trigger: "change" },
          {
            min: 3,
            max: 55,
            message: "长度在 3 到 55 个字符",
            trigger: "change"
          }
        ],
        goodsIntroduce: [
          { required: true, message: "请输入商品介绍", trigger: "change" },
          {
            min: 3,
            max: 150,
            message: "长度在 3 到 150 个字符",
            trigger: "change"
          }
        ],
        stock: [
          { required: true, message: "请输入库存", trigger: "change" },
          { min: 1, max: 5, message: "长度在 1 到 5 个字符", trigger: "change" }
        ],
        sellingPrice: [
          { required: true, message: "请输入在售价", trigger: "change" },
          { min: 1, max: 5, message: "长度在 1 到 5 个字符", trigger: "change" }
        ],
        costPrice: [
          { required: true, message: "请输入成本价", trigger: "change" },
          { min: 1, max: 5, message: "长度在 1 到 5 个字符", trigger: "change" }
        ],
        region: [
          { required: true, message: "请选择商家名称", trigger: "change" }
        ]
      }
    };
  },
  // 挂在完毕之前加载数据
  created() {
    this.fetch();
  },
  methods: {
    fetch() {
      this.pageInfo.pageIndex = 1;
      this.pageInfo.pageSize = 5;
      this.search();
    },
    search() {
      this.formData.payStartTime = this.formDataTime.time[0];
      this.formData.payEndTime = this.formDataTime.time[1];
console.log(this.formData.payStartTime)
      req("getTableData", {
        ...this.formData,
        role:JSON.parse(sessionStorage.getItem('role')).role,
        pageSize: this.pageInfo.pageSize,
        pageNum: this.pageInfo.pageIndex
      }).then(data => {
        console.log(data.data.list);
        this.pageInfo.total = data.data.total;
        this.pageInfo.pageSize = data.data.pageSize;
        this.pageInfo.pageIndex = data.data.pageNum;
        this.tableData = data.data.list;
        // console.log(this.tableData);
        // 把返回的订单状态替换成对应文字
        this.tableData.forEach(item => {
          if (item.orderStatus === 1) {
            item.orderStatus = "已下单";
          } else if (item.orderStatus === 2) {
            item.orderStatus = "已到货";
          } else if (item.orderStatus === 3) {
            item.orderStatus = "已取货";
          } else if (item.orderStatus === 4) {
            item.orderStatus = "已完成未评价";
          } else if (item.orderStatus === 5) {
            item.orderStatus = "已完成已评价";
          } else {
            item.orderStatus = "已取消";
          }
        });
        // 把返回的开始时间戳转化为标准时间
        this.tableData.forEach(item => {
          let timeobj = new Date(item.payTime);
          let month = timeobj.getMonth() + 1;
          let year = timeobj.getFullYear();
          let day = timeobj.getDate();
          let time = year + " - " + month + " - " + day;
          item.payTime = time;
        });
      });
    },
    reset() {
      this.fetch();
    },
    // 接收子组件的分页事件
    handleSizeChange(value) {
      console.log(value);
      this.pageInfo.pageSize = value;
      this.search();
    },
    handleCurrentChange(value) {
      console.log(value);
      this.pageInfo.pageIndex = value;
      this.search();
    },
    handleSelectionChange(rows) {
       console.log("rows", rows);
      this.multipId = [];
      this.multipVersion = [];
      rows.forEach(item => {
        this.multipId.push(item.orderId);
        this.multipVersion.push(item.version);
      });
    },
    dialogCancel() {
      this.dialogVisible = false;
    },
    dialogBeforeClose() {
      this.$refs.form.resetFields();
    },
    dialogConfirm() {
      console.log("dialog确定按钮被点击了");
      this.$refs.form.validdate(valid => {
        if (valid) {
          console.log("表单校验通过了");
        } else {
          return false;
        }
      });
    },
    // 详情对话框关闭事件
    handleClose(){
      this.orderDetaildialogVisible = false
      this.fetch()
    },
    orderDetaildialogVisibled(){
      this.orderDetaildialogVisible = false
      this.fetch()
    }
  },
  // 子组件注册
  components: {
    ISearch,
    ITable,
    IDialog
  }
};
</script>

<style lang="scss" scoped>
.el-input{
  width: 218px;
}
</style>
